<script lang="ts">
export default {
  data() {
    return {
      language: localStorage.getItem("lang") || "en",
      langOptions: [
        { value: "en", lable: "英文" },
        { value: "zh", lable: "中文" }
      ]
    }
  },
  mounted: function () {
    //todo
    console.debug("========lang=======")
    console.debug(this.$i18n);
    this.$i18n.locale=this.language
    console.debug("========lang locale=======" + this.$i18n.locale)
  },
  methods: {
    changeLanguageEvent(e) {
      console.debug("==========" + e);
      console.debug(this.$i18n)
      if (e === "en") {
        localStorage.setItem("lang", "en");
        this.$i18n.locale = localStorage.getItem("lang");
        this.language = "en";
        location.reload();
      } else if (e === "zh") {
        localStorage.setItem("lang", "zh");
        this.$i18n.locale = localStorage.getItem("lang");
        this.language = "zh";
        location.reload();
      } else {
        localStorage.setItem("lang", "en");
        this.$i18n.local = localStorage.getItem("lang");
        this.language = "en";
        location.reload();
      }
    }
  }
}
</script>

<template>
  <div>
    <WelcomeItem>
      <el-select v-model="language" @change="changeLanguageEvent">
        <el-option v-for="item in langOptions" :key="item.value" :label="item.lable" :value="item.value">
        </el-option>
      </el-select>
      <div class="system">语言信息：{{ $t('msg1') }}</div>
    </WelcomeItem>
  </div>
</template>
